<template>
  <div>
    <!-- 持续上新 -->
    <div class="all-area">
      <div class="db-container">
        <div class="db-outer">
          <div class="db-floor container">
            <div class="reco-head-outer">
              <div class="reco-head d-flex justify-content-between">
                <h2 class="floors-h2">热门-历史</h2>
                <button class="lookMore">查看更多</button>
              </div>
            </div>
            <div id="his-carousel" class="carousel slide db-move">
              <div class="carousel-inner d-flex carousel-books">
                <div class="carousel-item active">
                  <div class="d-flex">
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src2" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">科幻</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src1" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">科幻</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src3" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">青春</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src4" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">言情</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src5" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">职场</a>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="d-flex">
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src2" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">科幻</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src1" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">科幻</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src3" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">青春</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src4" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">言情</a>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="book-items">
                      <div class="pic">
                        <router-link
                          href=""
                          to="/publish_details"
                          class="book-pic"
                        >
                          <span class="cover-label"></span>
                          <img :src="src5" alt="" />
                        </router-link>
                      </div>
                      <div class="book-info">
                        <h4>克拉拉与太阳</h4>
                        <a href="#">[英] 石黑一雄</a>
                        <p>
                          ★诺贝尔文学奖得主石黑一雄最新长篇小说，全球同步出版
                          ★英籍日裔作家石黑一雄自2017年摘得诺贝尔文学奖以来出版的首部作品，也是他时隔五年发表的长篇小说
                        </p>
                        <div class="evalue">
                          <img :src="src6" alt="" />
                          <span class="book-score">9.6</span>
                          <span class="book-class">
                            <span class="separator"></span>
                            <a href="#">职场</a>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <button
                class="carousel-control-prev db-btn1"
                type="button"
                data-target="#his-carousel"
                data-slide="prev"
              >
                <span
                  class="carousel-control-prev-icon"
                  aria-hidden="true"
                ></span>
                <span class="sr-only">Previous</span>
              </button>
              <button
                class="carousel-control-next db-btn2"
                type="button"
                data-target="#his-carousel"
                data-slide="next"
              >
                <span
                  class="carousel-control-next-icon"
                  aria-hidden="true"
                ></span>
                <span class="sr-only">Next</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src1: "/image/everydayRecomend/59697016.jpg",
      src2: "/image/everydayRecomend/110344603.jpg",
      src3: "/image/everydayRecomend/144121345.jpg",
      src4: "/image/everydayRecomend/300105475.jpg",
      src5: "/image/everydayRecomend/318297478.jpg",
      src6: "/image/redStar.png",
    };
  },
};
</script>

<style scoped>
.all-area {
  width: 100%;
  padding: 30px 0 30px;
  background-color: #f8f9f9;
}
.all-area .db-container {
  padding: 0 20px;
  margin: 0 auto;
}
.all-area .db-container .db-outer {
  height: 400px;
}
.all-area .db-container .db-outer .db-floor {
  margin: 0 auto;
  padding: 0;
}
.all-area .db-container .db-outer .db-floor .reco-head-outer {
  margin: 0 auto;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .reco-head-outer
  .reco-head
  .floors-h2 {
  font-size: 24px;
  font-weight: 600;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .reco-head-outer
  .reco-head
  .lookMore {
  height: 30px;
  font-size: 13px;
  background-color: white;
  color: #333;
  padding: 0 14px;
  border-radius: 5px;
  border: none;
  box-shadow: 2px 2px 2px #ccc;
}
.all-area
  .db-container
  .db-outer
  .db-floor:hover
  .db-move
  button:first-of-type {
  opacity: 1;
  transform: translate(50px, 0);
}
.all-area .db-container .db-outer .db-floor:hover .db-move button:last-of-type {
  opacity: 1;
  transform: translate(-50px, 0);
}
.all-area .db-container .db-outer .db-floor .db-move {
  position: relative;
}
.all-area .db-container .db-outer .db-floor .db-move button:hover {
  background-color: #389eac;
}
.all-area .db-container .db-outer .db-floor .db-move button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: black;
  margin-top: 162.5px;
  box-shadow: 2px 2px 2px #eee;
  background-color: #ccc;
  opacity: 0;
  transform: translate(0, 0);
  transition: 0.5s linear;
  position: absolute;
}
.all-area .db-container .db-outer .db-floor .db-move .db-btn1 {
  left: -110px;
}
.all-area .db-container .db-outer .db-floor .db-move .db-btn2 {
  right: -50px;
}
.all-area .db-container .db-outer .db-floor .db-move .carousel-books {
  width: 1140px;
  margin: 0 auto;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items {
  width: 228px;
  height: 375px;
  padding: 40px 20px 35px 20px;
  margin: 0;
  }
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .pic{
    width: 120px;
    height: 180px;
    position: relative;
    overflow: hidden;
  }
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .pic
  .book-pic:hover::after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 180px;
    background-color: rgba(0, 0, 0, 0.05);
  }
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .pic
  .book-pic
  img {
  width: 120px;
  height: 180px;
  float: left;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #ccc;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .pic
  .book-pic
  .cover-label::before{
    top: 20px;
    right: 20px;
    width: 160px;
    height: 36px;
    font-size: 24px;
    line-height: 36px;
    transform: translate(50%, -100%) rotate(45deg) scale(.5);
    color: rgb(51, 51, 51);
    content: "会员";
    background: rgb(214, 192, 162);
    position: absolute;
    text-align: center;
    transform-origin: bottom center;
  }
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info {
  width: 170px;
  margin-top: 10px;
  text-align: left;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  h4 {
  font-size: 18px;
  width: 130px;
  margin-top: 10px;
  font-weight: 500;
  transform: translateY(8px);
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  a {
  text-decoration: none;
  width: 130px;
  color: gray;
  font-size: 14px;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  p {
  width: 170px;
  margin: 0 0 8px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  .evalue
  img {
  width: 11px;
  height: 10px;
  margin: -1px 3px 0 0;
  box-shadow: none;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  .evalue
  .book-score {
  font-size: 12px;
  color: #fa595f;
  margin: 0px 0px 4px;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  .evalue
  .book-class {
  width: 45px;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  .evalue
  .book-class
  .separator {
  width: 1px;
  height: 10px;
  background-color: #777777;
  display: inline-block;
  margin: 0 10px;
  vertical-align: -1px;
}
.all-area
  .db-container
  .db-outer
  .db-floor
  .db-move
  .carousel-books
  .book-items
  .book-info
  .evalue
  .book-class
  a {
  font-size: 12px;
  color: #777777;
}
</style>